import React, { Component } from 'react';
import 'styles/payment-request/payment-pay-info.scss';
import ListDecorator from '../commom-list/list-decorator';
import AdvancedTable from 'components/advanced-table';
import SlideFrame from 'components/slide-frame';
import NewPayInfo from './new-pay-info';
import { deepCopy, messages, queryCurrencyPrecision } from 'share/common';
import { Popconfirm, message, Row, Col, Button } from 'antd';
import paymentService from '../payment-service';
import Condition from 'components/condition';
import moment from 'moment';

const { SimpleTable } = AdvancedTable;
const { If } = Condition;

@ListDecorator
class PaymentPayInfo extends Component {

  state = {};

  name = 'payment-pay-info';

  payInfoRef = null;

  handleColumns = new Map([
    ['operation', (context) => {
    const { readOnly} = this.props;
      context.render = (value, record) =>
        <section>
          <div>
            <a  disabled={readOnly} onClick={() => this.openDetail(record)}>{messages('common.edit')/*编辑*/ /* 编辑 */}</a>
            &nbsp;
            <Popconfirm onConfirm={() => {this.handleDelete(record);}} title={messages('expense-18.key43')/*你确定要删除这条数据吗?*/}>
              <a disabled={readOnly}>{messages('common.delete')/*删除*/}</a>
            </Popconfirm>
          </div>
        </section>;
      return context;
    }]
  ]);

  handleDelete = async (record) => {
    const { id } = record;
    await paymentService.deletePaymentPayLine(id);
    message.success(messages('common.delete.success',{arg1: ''})/*{arg1} 删除成功*/);
    this.props.refresh();
    this.payInfoRef.getList();
  };

  handleSearchParams = (page, size, params) => {
    const { paymentRequestOID } = this.props;
    return this.service(params, paymentRequestOID);
  };

  openDetail = (record = {}) => {
    const { paymentRequestOID, formOID, applicantOID } = this.props;
    const { id, payeeId } = record;
    SlideFrame.open({
      content: NewPayInfo,
      title: !id ? messages('expense-18.key44')/*新增付款行*/ : messages('expense-18.key45')/*编辑付款行*/,
      params: {
        paymentRequestOID,
        formOID,
        applicantOID,
        id,
        payeeId
      },
      afterClose: this.handleClose,
    }, this);
  };

  handleClose = (flag) => {
    if (flag){
      this.payInfoRef.getList();
      this.props.refresh();
    }
  };

  //列扩展信息
  columnRenderAllExpandedRow = record => {
    // 付款信息
    const { cashTransactionDetailLogDTOList: list = [] } = record;
    return list && list.length > 0 ? this.renderCashTransactionDetail(list) : null;
  };


  renderCashTransactionDetail = (list) => {
    return (
      <Row>
        <Col span={2}>{messages('expense-18.key46')/*付款日志*/}：</Col>
        <Col span={22}>
          {
            list.map(item => {
              return (<div>
                <span>{messages('expense-18.key4')/*付款金额*/}：{`${item.curreny}  ${this.filterMoney(item.amount,queryCurrencyPrecision(item.curreny),true)}`}</span>
                <span style={{marginLeft:'10px'}}>{messages('common.currency.rate')/*汇率*/}：{item.exchangeRate}</span>
                <span style={{marginLeft:'10px'}}>{messages('expense-18.key47')/*汇率日期*/}：{moment(item.payDate).format('YYYY-MM-DD')}</span>
              </div>)
            })
          }
        </Col>
      </Row>
    )
  };

  render() {
    const { readOnly } = this.props;
    const columns = deepCopy(this.columns);
    readOnly && columns.splice(columns.length - 1, 1);
    return (
      <section className="pay-info">
        <section className="pay-info-title">
          <h3 className="pay-info__h3">
            {messages('expense-18.key48')/*付款信息*/}
          </h3>
          <If value={!readOnly}>
            <Button type="primary" onClick={() => this.openDetail()}>
              {messages('common.add')/*添加*/}
            </Button>
          </If>
        </section>
        <SimpleTable
          showUtils
          tableName='payment-request-pay-table'
          show={['tag-list', 'table-utils']}
          size="middle"
          columns={columns}
          searchForm={this.searchForm}
          rowKey="id"
          service={this.handleSearchParams}
          onExpand={this.renderContractLine}
          onRef={ref => this.payInfoRef = ref}
          bordered
          pagination={null}
          expandedRowRender={this.columnRenderAllExpandedRow}
        />
      </section>
    );
  }
}

PaymentPayInfo.propTypes = {};

export default PaymentPayInfo;
